<template>
    <div> 
        <el-dialog :close-on-click-modal="false" :title='title' :num='num'  :types ='types' :visible.sync="show"  width="600px" :before-close="handleClose"  class="pdialog">
			<el-input placeholder="请输入内容"  v-model.trim="content" maxlength="20"></el-input>
			<button class="button-save" v-if="content" @click="dialog">保 存</button>
			<button class="button-dark" v-else>添 加</button>
			
			<ul class="list block">
				<draggable  v-bind="dragOptions"  class="list"  @change='endEvent()' v-model="NoSystemList"  v-if="num == '1'">
					<li v-for="(item,index) in NoSystemList" :key="item.id" v-if="item.operation != -1">
						<img src="../assets/images/filescourse.png" class="filescourse"/>
						<input type="text"  v-model="replaceTitles" class="text-input" v-focus v-if="todoEdie == item"  @keyup.13="editorend(item)" @blur="blurend(item)"/>
						<label v-else class="textedits">{{item.name}}</label>
						<span class="operation">
							<i class="el-icon-edit" @click="editList(item)"></i>
							<i class="iconfont icon-cuowu" @click="delItem(item)"></i>
						</span>		
					</li>
				</draggable>
				<!-- 专业方向 -->
				<draggable  v-bind="dragOptions"  class="list"  @change='endEvent()' v-model="NoSystemList"  v-if="num == '3'">
					<li v-for="(item,index) in NoSystemList" :key="index">
						<img src="../assets/images/filescourse.png" class="filescourse"/>
						<input type="text"  v-model="replaceTitles" class="text-input" v-focus v-if="todoEdie == item"  @keyup.13="editorend(item)" @blur="blurend(item)"/>
						<label v-else class="textedits">{{item.name}}</label>
						<span class="operation">
							<i class="el-icon-edit" @click="editList(item)"></i>
							<i class="iconfont icon-cuowu" @click="delItem2(item)"></i>
						</span>		
					</li>
				</draggable>
				<div v-if="num == '2'" class="list">
				<li v-for="(item,index) in NoSystemList" :key="item.id" v-if="item.operation != -1">
					<img src="../assets/images/filescourse.png" class="filescourse"/>
					<input type="text"  v-model="replaceTitles" class="text-input" v-focus v-if="todoEdie == item"  @keyup.13="editorend(item)" @blur="blurend(item)"/>
					<label v-else class="textedits">{{item.name}}</label>
					<span class="operation">
						<i class="el-icon-edit" @click="editList(item)"></i>
						<i class="iconfont icon-cuowu" @click="delItem(item)"></i>
					</span>		
				</li>
				</div>
			</ul>
			<el-button @click="saves" class="button-style centers" v-if="content.length <= 0">确 定</el-button>
			<el-button class="button-style centers centersEmpty"  v-else>确 定</el-button>
		</el-dialog>
    </div>
</template>

<script>
	import draggable from 'vuedraggable'
    export default {
		components: {
			draggable
        },
        name: 'dialogCompont',
        props: {
            show: {
                type: Boolean,
                default: true
            },
            title: {
                type: String,
                default: ''
			},
			num: {
                type: String,
                default: ''
            },
            listData:{
                type: Array,
			},
			types:{
				type: String,
				default: ''
                
			}
        },
        data () {
            return {
                //非系统课程
                content:'',
                //判断是否是当前那个
                todoEdie:'',
                //非系统课程列表
				NoSystemList:[],
				//修改内容
				replaceTitles:''
            }
		},
		created(){
			
		},
		computed: {
			//拖拽插件
			dragOptions() {
				return {
					animation: 200,
					group: "description",
					disabled: false,
				};
			},
		},
		//监听父组件传来的值
		watch: {
			listData(val) {
				this.NoSystemList = val
			}
		},
        methods:{
			//拖拽完成
			endEvent(){
				this.$forceUpdate()
			},
			//编辑每项
			editList(item){
				for(let i= 0; i<this.NoSystemList.length; i++){
					if(this.NoSystemList[i].id == item.id ){
						this.todoEdie = item
						this.replaceTitles = item.name
					}
				}	
			},
			//编辑结束
			editorend(item){
				let vall = JSON.parse(JSON.stringify(this.NoSystemList))
				for(let i=0;i < vall.length; i++){
					if(vall[i].name == item.name && vall[i].id == item.id){
						this.todoEdie = ''
						if(item.name == this.replaceTitles){
							vall[i].operation = 0	
							vall[i].name = this.replaceTitles
						}else{
							vall[i].operation = 2
							vall[i].name = this.replaceTitles
						}
					}
				}
				this.NoSystemList = vall
			},
			//鼠标离开焦点
			blurend(item){
				let valls = JSON.parse(JSON.stringify(this.NoSystemList))
				for(let i=0;i < valls.length; i++){
					if(valls[i].name == item.name && valls[i].id == item.id){
						this.todoEdie = ''
						if(item.name == this.replaceTitles){
							valls[i].operation = 0	
							valls[i].name = this.replaceTitles
						}else{
							valls[i].operation = 2
							valls[i].name = this.replaceTitles
						}	
					}
				}
				this.NoSystemList = valls
				//console.log(this.NoSystemList,999)
			},
			//保存弹窗
			saves(){
				this.content = ''
                this.$emit('close',this.num,false,this.NoSystemList,this.types)
            },
           	handleClose() {
				this.content = ''
				this.NoSystemList =	this.listData 
             	this.$emit('closeBind')
            },
			//删除某项
			delItem(item){
				if(item.id){
					this.NoSystemList.forEach(val=>{
						if(val.id == item.id && val.name == item.name){
							val.operation = -1 || ''
						}
					})	
				}else{
					this.NoSystemList = this.NoSystemList.filter(val=>{
						return !(val.name == item.name  && val.id == item.id )
					})
				}
			},
			delItem2(item){
				this.NoSystemList = this.NoSystemList.filter(val=>{
					return !(val.name == item.name  && val.id == item.id )
				})
			},
			//弹窗添加
			dialog(){
				for(let i=0; i< this.NoSystemList.length; i++){
					if(this.NoSystemList[i].name == this.content){
						this.$message({
							message: '不能添加重复名称',
							type: 'warning'
						})
						this.content = ''
						return
					}
				}	
				//这个 id =0 为了 专业方向 李辛那边加的
				this.NoSystemList = this.NoSystemList.concat([{'name':this.content,'operation':1,'id':0}])
				this.content = ''	
				
            },
        }
    }
</script>
<style scoped>
    .el-dialog__wrapper>>>.el-dialog__body{
        padding: 30px 50px;
    }
    .el-input{
        display: inline;
    }
    .el-input>>>.el-input__inner{
        width: 280px;
    }
	.block::-webkit-scrollbar{
		width: 2px;
	}
	.block::-webkit-scrollbar-thumb {
		background: #dededd;
		border-radius:50px;
	}
	.block{
		overflow-y: scroll;
		max-height: 430px;
	}
</style>
<style lang="scss" scoped>
    
    //弹窗
    .el-input{
        width: 58%;
    }
	.list{
		margin: 14px 0px;
	}
	.list>li{
		line-height: 32px;
		height: 32px;
		padding-left: 10px;
        max-width: 410px;
	}
    .list .textedits{
        max-width: 320px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
    }
	.list>li:hover{
		cursor: pointer;
	}
	.list>li:hover  .operation{
		display: inline-block;
	}
	.operation{
		display: none;
	}
	.el-icon-edit{
		font-size: 18px;
		color: #a1a1a1;
		cursor: pointer;
		margin-left: 10px;
	}
	.el-icon-circle-close{
		font-size: 18px;
		color: #a1a1a1;
		cursor: pointer;
		margin-left: 5px;
	}
	.text-input{
		height: 30px;
		line-height: 30px;
		border-radius: 3px;
		border: 1px solid #2b77e5;
		color: #979797;
		margin-left: 5px;
		padding-left: 5px;
	}
    .list-group-item{
        cursor: move;
	}
	.el-icon-document{
	  color: #d0a109
  	}
	.button-dark{
		background: #8c8d90d6;
		color: #fff;
		cursor: pointer;
		height: 32px;
		line-height: 32px;
		border-radius: 3px;
		width: 52px;
		margin-left: 4px;
		margin-top: -2px;
	}
    .button-save{
        background: #1277eb;
        color: #fff;
        cursor: pointer;
        height: 32px;
        line-height: 32px;
        border-radius: 3px;
        width: 52px;
        margin-left: 4px;
        margin-top: -2px;
    }
    .icon-cuowu{
        color: #a1a1a1;
        cursor: pointer;
    }
    .centers{
        margin: 0 auto;
        display: block;
    }
    .filescourse{
        vertical-align: 1px;
        margin-right: 2px;
    }
	.centersEmpty{
		color: #999;
		border: 1px solid #999;
		&:hover{
			background: transparent;
			color: #999;
			cursor: not-allowed
		}
	}
	.pdialog{
		.sortable-chosen{
            background: #d6eafe;
            border: 1px dashed #467cb3;
            color: #1577ea;
        }
	}
 
</style>
